<!-- 库存管理页 -->
<template>
  <div class="app-container">
    <main class="main-content">
      <!-- 添加入库记录表单 -->
      <div class="form-container">
        <h2 class="form-header"><i class="fas fa-plus-circle"></i> 添加入库记录</h2>

        <div class="form-row">
          <div class="form-group">
            <label for="inType">入库类型</label>
            <select id="inType" v-model="inForm.type">
              <option value="">-- 选择入库类型 --</option>
              <option value="raw">原材料入库</option>
              <option value="finished">成品入库</option>
            </select>
          </div>

          <div class="form-group">
            <label for="inNumber">入库单号</label>
            <input type="text" id="inNumber" v-model="inForm.number" placeholder="系统自动生成" disabled>
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="materialName">物品名称</label>
            <input type="text" id="materialName" v-model="inForm.materialName" placeholder="输入物品名称">
          </div>

          <div class="form-group">
            <label for="materialSpec">规格型号</label>
            <input type="text" id="materialSpec" v-model="inForm.materialSpec" placeholder="输入规格型号">
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="inQuantity">入库数量</label>
            <input type="number" id="inQuantity" v-model.number="inForm.quantity" placeholder="输入入库数量">
          </div>

          <div class="form-group">
            <label for="inUnit">计量单位</label>
            <select id="inUnit" v-model="inForm.unit">
              <option value="个">个</option>
              <option value="件">件</option>
              <option value="箱">箱</option>
              <option value="千克">千克</option>
              <option value="米">米</option>
            </select>
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="inDate">入库日期</label>
            <input type="date" id="inDate" v-model="inForm.date">
          </div>

          <div class="form-group">
            <label for="storageLocation">存放仓位</label>
            <select id="storageLocation" v-model="inForm.storageLocation">
              <option value="">-- 选择存放仓位 --</option>
              <option v-for="location in locations" :key="location.code" :value="location.code">
                {{ location.name }}
              </option>
            </select>
          </div>
        </div>

        <div class="form-group">
          <label for="inRemark">备注信息</label>
          <textarea id="inRemark" v-model="inForm.remark" rows="3" placeholder="输入备注信息（可选）"></textarea>
        </div>

        <div class="form-actions">
          <button class="btn-secondary" @click="resetInForm">取消</button>
          <button class="btn-primary" @click="submitInForm">提交入库</button>
        </div>
      </div>

      <!-- 添加出库记录表单 -->
      <div class="form-container">
        <h2 class="form-header"><i class="fas fa-minus-circle"></i> 添加出库记录</h2>

        <div class="form-row">
          <div class="form-group">
            <label for="outType">出库类型</label>
            <select id="outType" v-model="outForm.type">
              <option value="">-- 选择出库类型 --</option>
              <option value="raw">原材料出库</option>
              <option value="finished">成品出库</option>
            </select>
          </div>

          <div class="form-group">
            <label for="outNumber">出库单号</label>
            <input type="text" id="outNumber" v-model="outForm.number" placeholder="系统自动生成" disabled>
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="outMaterial">出库物品</label>
            <select id="outMaterial" v-model="outForm.materialId">
              <option value="">-- 选择出库物品 --</option>
              <option v-for="item in inventory" :key="item.id" :value="item.id">
                {{ item.name }} ({{ item.spec }}) - 库存: {{ item.quantity }} {{ item.unit }}
              </option>
            </select>
          </div>

          <div class="form-group">
            <label for="outQuantity">出库数量</label>
            <input type="number" id="outQuantity" v-model.number="outForm.quantity" placeholder="输入出库数量">
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="outDate">出库日期</label>
            <input type="date" id="outDate" v-model="outForm.date">
          </div>

          <div class="form-group">
            <label for="recipient">领用单位/个人</label>
            <input type="text" id="recipient" v-model="outForm.recipient" placeholder="输入领用单位或个人">
          </div>
        </div>

        <div class="form-group">
          <label for="outPurpose">出库用途</label>
          <input type="text" id="outPurpose" v-model="outForm.purpose" placeholder="输入出库用途">
        </div>

        <div class="form-group">
          <label for="outRemark">备注信息</label>
          <textarea id="outRemark" v-model="outForm.remark" rows="3" placeholder="输入备注信息（可选）"></textarea>
        </div>

        <div class="form-actions">
          <button class="btn-secondary" @click="resetOutForm">取消</button>
          <button class="btn-primary" @click="submitOutForm">提交出库</button>
        </div>
      </div>

      <!-- 库存查询 -->
      <div class="table-container">
        <div class="table-header">
          <h2><i class="fas fa-search"></i> 库存查询</h2>
          <div class="search-box">
            <input type="text" v-model="searchQuery" placeholder="输入物品名称或编号搜索">
            <button class="btn-primary" @click="searchInventory">查询</button>
          </div>
        </div>

        <table id="stockTable">
          <thead>
            <tr>
              <th>物品编号</th>
              <th>物品名称</th>
              <th>规格型号</th>
              <th>当前库存</th>
              <th>存放仓位</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in filteredInventory" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.spec }}</td>
              <td>{{ item.quantity }} {{ item.unit }}</td>
              <td>{{ item.location }}</td>
              <td>
                <span class="badge" :class="getStatusClass(item.status)">
                  {{ getStatusText(item.status) }}
                </span>
              </td>
              <td>
                <button class="action-btn btn-view" @click="showItemDetail(item)">详情</button>
                <button class="action-btn btn-edit" @click="showEditForm(item)">编辑</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 仓库管理 -->
      <div class="table-container">
        <div class="table-header">
          <h2><i class="fas fa-map-marker-alt"></i> 仓库管理</h2>
          <button class="btn-primary" @click="showAddLocationModal = true">添加新仓位</button>
        </div>

        <table id="locationTable">
          <thead>
            <tr>
              <th>仓位编号</th>
              <th>仓位名称</th>
              <th>仓库类型</th>
              <th>当前容量</th>
              <th>最大容量</th>
              <th>负责人</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="location in locations" :key="location.code">
              <td>{{ location.code }}</td>
              <td>{{ location.name }}</td>
              <td>{{ location.type === 'raw' ? '原材料仓' : '成品仓' }}</td>
              <td>{{ location.current }}/{{ location.max }} ({{ Math.round((location.current / location.max) * 100) }}%)</td>
              <td>{{ location.max }}</td>
              <td>{{ location.manager }}</td>
              <td>
                <span class="badge" :class="getLocationStatusClass(location.status)">
                  {{ getLocationStatusText(location.status) }}
                </span>
              </td>
              <td>
                <button class="action-btn btn-edit" @click="showLocationEditForm(location)">编辑</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>

    <!-- 详情模态框 -->
    <div class="modal" :class="{ active: showDetailModal }" @click="closeModal($event, 'detail')">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">物品详情</h3>
          <button class="close-btn" @click="showDetailModal = false">&times;</button>
        </div>
        <div class="modal-body" v-if="currentItem">
          <div class="detail-row">
            <div class="detail-label">物品编号:</div>
            <div class="detail-value">{{ currentItem.id }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">物品名称:</div>
            <div class="detail-value">{{ currentItem.name }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">规格型号:</div>
            <div class="detail-value">{{ currentItem.spec }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">当前库存:</div>
            <div class="detail-value">{{ currentItem.quantity }} {{ currentItem.unit }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">存放仓位:</div>
            <div class="detail-value">{{ currentItem.location }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">物品类型:</div>
            <div class="detail-value">{{ currentItem.type === 'raw' ? '原材料' : '成品' }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">库存状态:</div>
            <div class="detail-value">
              <span class="badge" :class="getStatusClass(currentItem.status)">
                {{ getStatusText(currentItem.status) }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑模态框 -->
    <div class="modal" :class="{ active: showEditModal }" @click="closeModal($event, 'edit')">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">编辑信息</h3>
          <button class="close-btn" @click="showEditModal = false">&times;</button>
        </div>
        <div class="modal-body" v-if="editingItem">
          <div class="form-row">
            <div class="form-group">
              <label for="editId">物品编号</label>
              <input type="text" id="editId" v-model="editingItem.id" disabled>
            </div>
            <div class="form-group">
              <label for="editName">物品名称</label>
              <input type="text" id="editName" v-model="editingItem.name">
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label for="editSpec">规格型号</label>
              <input type="text" id="editSpec" v-model="editingItem.spec">
            </div>
            <div class="form-group">
              <label for="editQuantity">库存数量</label>
              <input type="number" id="editQuantity" v-model.number="editingItem.quantity">
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label for="editUnit">计量单位</label>
              <select id="editUnit" v-model="editingItem.unit">
                <option value="个">个</option>
                <option value="件">件</option>
                <option value="箱">箱</option>
                <option value="千克">千克</option>
                <option value="米">米</option>
              </select>
            </div>
            <div class="form-group">
              <label for="editLocation">存放仓位</label>
              <select id="editLocation" v-model="editingItem.location">
                <option v-for="location in locations" :key="location.code" :value="location.code">
                  {{ location.name }}
                </option>
              </select>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label for="editType">物品类型</label>
              <select id="editType" v-model="editingItem.type">
                <option value="raw">原材料</option>
                <option value="finished">成品</option>
              </select>
            </div>
            <div class="form-group">
              <label for="editStatus">库存状态</label>
              <select id="editStatus" v-model="editingItem.status">
                <option value="sufficient">充足</option>
                <option value="warning">预警</option>
                <option value="danger">缺货</option>
              </select>
            </div>
          </div>
        </div>
        <div class="form-actions">
          <button class="btn-secondary" @click="showEditModal = false">取消</button>
          <button class="btn-primary" @click="saveItemEdit">保存</button>
        </div>
      </div>
    </div>

    <!-- 添加仓位模态框 -->
    <div class="modal" :class="{ active: showAddLocationModal }" @click="closeModal($event, 'addLocation')">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">添加新仓位</h3>
          <button class="close-btn" @click="showAddLocationModal = false">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-row">
            <div class="form-group">
              <label for="locationCode">仓位编号</label>
              <input type="text" id="locationCode" v-model="locationForm.code" placeholder="例如：A-01-01">
            </div>

            <div class="form-group">
              <label for="locationType">仓库类型</label>
              <select id="locationType" v-model="locationForm.type">
                <option value="raw">原材料仓</option>
                <option value="finished">成品仓</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label for="locationName">仓位名称</label>
            <input type="text" id="locationName" v-model="locationForm.name" placeholder="例如：原材料仓-A区-01排-01位">
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="currentCapacity">当前容量</label>
              <input type="number" id="currentCapacity" v-model.number="locationForm.current" placeholder="输入当前容量">
            </div>

            <div class="form-group">
              <label for="maxCapacity">最大容量</label>
              <input type="number" id="maxCapacity" v-model.number="locationForm.max" placeholder="输入最大容量">
            </div>
          </div>

          <div class="form-group">
            <label for="locationManager">负责人</label>
            <input type="text" id="locationManager" v-model="locationForm.manager" placeholder="输入负责人姓名">
          </div>

          <div class="form-group">
            <label for="locationStatus">状态</label>
            <select id="locationStatus" v-model="locationForm.status">
              <option value="active">正常</option>
              <option value="maintenance">维护中</option>
              <option value="closed">已关闭</option>
            </select>
          </div>
        </div>
        <div class="form-actions">
          <button class="btn-secondary" @click="showAddLocationModal = false">取消</button>
          <button class="btn-primary" @click="addNewLocation">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'

// 数据状态
const inventory = ref([
  {
    id: "MAT-2024001",
    name: "不锈钢板（304材质）",
    spec: "304-2.0 * 1220 * 2440",
    quantity: 125,
    location: "A-01-01",
    unit: "张",
    type: "raw",
    status: "sufficient"
  },
  {
    id: "MAT-2024002",
    name: "铝合金型材（6061）",
    spec: "6061-30 * 30 * 1000",
    quantity: 78,
    location: "A-01-02",
    unit: "根",
    type: "raw",
    status: "sufficient"
  },
  {
    id: "PRO-2024001",
    name: "产品A型（工业控制器）",
    spec: "CTRL-A-2024",
    quantity: 35,
    location: "B-02-01",
    unit: "台",
    type: "finished",
    status: "warning"
  },
  {
    id: "PRO-2024002",
    name: "产品B型（传感器模块）",
    spec: "SENSOR-B-2024",
    quantity: 12,
    location: "B-02-02",
    unit: "个",
    type: "finished",
    status: "danger"
  }
])

const locations = ref([
  {
    code: "A-01-01",
    name: "原材料仓-A区-01排-01位",
    type: "raw",
    current: 85,
    max: 2000,
    manager: "张三",
    status: "active"
  },
  {
    code: "A-01-02",
    name: "原材料仓-A区-01排-02位",
    type: "raw",
    current: 70,
    max: 2000,
    manager: "张三",
    status: "active"
  },
  {
    code: "B-02-01",
    name: "成品仓-B区-02排-01位",
    type: "finished",
    current: 65,
    max: 1500,
    manager: "李四",
    status: "active"
  },
  {
    code: "B-02-02",
    name: "成品仓-B区-02排-02位",
    type: "finished",
    current: 45,
    max: 1500,
    manager: "李四",
    status: "active"
  }
])

const inRecords = ref([])
const outRecords = ref([])

// 表单数据
const inForm = reactive({
  type: '',
  number: '',
  materialName: '',
  materialSpec: '',
  quantity: '',
  unit: '个',
  date: '',
  storageLocation: '',
  remark: ''
})

const outForm = reactive({
  type: '',
  number: '',
  materialId: '',
  quantity: '',
  date: '',
  recipient: '',
  purpose: '',
  remark: ''
})

const locationForm = reactive({
  code: '',
  name: '',
  type: 'raw',
  current: '',
  max: '',
  manager: '',
  status: 'active'
})

// 模态框状态
const showDetailModal = ref(false)
const showEditModal = ref(false)
const showAddLocationModal = ref(false)

// 当前查看/编辑的项目
const currentItem = ref(null)
const editingItem = ref(null)

// 搜索查询
const searchQuery = ref('')

// 计算属性
const filteredInventory = computed(() => {
  if (!searchQuery.value) return inventory.value
  
  const query = searchQuery.value.toLowerCase()
  return inventory.value.filter(item => 
    item.id.toLowerCase().includes(query) ||
    item.name.toLowerCase().includes(query) ||
    item.spec.toLowerCase().includes(query) ||
    item.location.toLowerCase().includes(query)
  )
})

// 方法
const getStatusClass = (status) => {
  switch (status) {
    case 'sufficient': return 'badge-success'
    case 'warning': return 'badge-warning'
    case 'danger': return 'badge-danger'
    default: return ''
  }
}

const getStatusText = (status) => {
  switch (status) {
    case 'sufficient': return '充足'
    case 'warning': return '预警'
    case 'danger': return '缺货'
    default: return ''
  }
}

const getLocationStatusClass = (status) => {
  switch (status) {
    case 'active': return 'badge-success'
    case 'maintenance': return 'badge-warning'
    case 'closed': return 'badge-danger'
    default: return ''
  }
}

const getLocationStatusText = (status) => {
  switch (status) {
    case 'active': return '正常'
    case 'maintenance': return '维护中'
    case 'closed': return '已关闭'
    default: return ''
  }
}

const showItemDetail = (item) => {
  currentItem.value = item
  showDetailModal.value = true
}

const showEditForm = (item) => {
  editingItem.value = { ...item }
  showEditModal.value = true
}

const showLocationEditForm = (location) => {
  editingItem.value = { ...location }
  showEditModal.value = true
}

const saveItemEdit = () => {
  const index = inventory.value.findIndex(i => i.id === editingItem.value.id)
  if (index !== -1) {
    inventory.value[index] = { ...editingItem.value }
  }
  
  showEditModal.value = false
  alert('物品信息更新成功！')
}

const resetInForm = () => {
  inForm.type = ''
  inForm.materialName = ''
  inForm.materialSpec = ''
  inForm.quantity = ''
  inForm.remark = ''
}

const resetOutForm = () => {
  outForm.type = ''
  outForm.materialId = ''
  outForm.quantity = ''
  outForm.recipient = ''
  outForm.purpose = ''
  outForm.remark = ''
}

const submitInForm = () => {
  // 验证表单
  if (!inForm.type) {
    alert('请选择入库类型')
    return
  }

  if (!inForm.materialName) {
    alert('请输入物品名称')
    return
  }

  if (!inForm.quantity || inForm.quantity <= 0) {
    alert('请输入有效的入库数量')
    return
  }

  if (!inForm.storageLocation) {
    alert('请选择存放仓位')
    return
  }

  // 创建入库记录
  const record = {
    id: inForm.number,
    type: inForm.type,
    name: inForm.materialName,
    spec: inForm.materialSpec,
    quantity: inForm.quantity,
    unit: inForm.unit,
    date: inForm.date,
    location: inForm.storageLocation,
    remark: inForm.remark,
    createdAt: new Date().toISOString()
  }

  inRecords.value.unshift(record)

  // 更新库存
  const existingItem = inventory.value.find(item =>
    item.name === record.name && item.spec === record.spec && item.location === record.location
  )

  if (existingItem) {
    existingItem.quantity += record.quantity
    updateInventoryStatus(existingItem)
  } else {
    const newItem = {
      id: `ITEM-${new Date().getTime().toString().slice(-6)}`,
      name: record.name,
      spec: record.spec,
      quantity: record.quantity,
      unit: record.unit,
      location: record.location,
      type: record.type === 'raw' ? 'raw' : 'finished',
      status: 'sufficient'
    }
    inventory.value.push(newItem)
  }

  resetInForm()
  alert('入库记录提交成功！库存已更新。')
}

const submitOutForm = () => {
  // 验证表单
  if (!outForm.type) {
    alert('请选择出库类型')
    return
  }

  if (!outForm.materialId) {
    alert('请选择出库物品')
    return
  }

  if (!outForm.quantity || outForm.quantity <= 0) {
    alert('请输入有效的出库数量')
    return
  }

  if (!outForm.recipient) {
    alert('请输入领用单位或个人')
    return
  }

  // 获取选中的物品
  const item = inventory.value.find(i => i.id === outForm.materialId)
  if (!item) {
    alert('选择的物品不存在')
    return
  }

  // 检查库存是否足够
  if (item.quantity < outForm.quantity) {
    alert(`库存不足，当前库存: ${item.quantity} ${item.unit}`)
    return
  }

  // 创建出库记录
  const record = {
    id: outForm.number,
    type: outForm.type,
    itemId: item.id,
    itemName: item.name,
    itemSpec: item.spec,
    quantity: outForm.quantity,
    unit: item.unit,
    date: outForm.date,
    recipient: outForm.recipient,
    purpose: outForm.purpose,
    remark: outForm.remark,
    createdAt: new Date().toISOString()
  }

  outRecords.value.unshift(record)

  // 更新库存
  item.quantity -= outForm.quantity
  updateInventoryStatus(item)

  resetOutForm()
  alert('出库记录提交成功！库存已更新。')
}

const updateInventoryStatus = (item) => {
  if (item.quantity <= 0) {
    item.status = 'danger'
  } else if (item.quantity < 20) {
    item.status = 'warning'
  } else {
    item.status = 'sufficient'
  }
}

const addNewLocation = () => {
  // 验证表单
  if (!locationForm.code) {
    alert('请输入仓位编号')
    return
  }

  if (!locationForm.name) {
    alert('请输入仓位名称')
    return
  }

  if (!locationForm.current || locationForm.current < 0) {
    alert('请输入有效的当前容量')
    return
  }

  if (!locationForm.max || locationForm.max <= 0) {
    alert('请输入有效的最大容量')
    return
  }

  if (locationForm.current > locationForm.max) {
    alert('当前容量不能大于最大容量')
    return
  }

  if (!locationForm.manager) {
    alert('请输入负责人')
    return
  }

  // 检查仓位编号是否已存在
  if (locations.value.some(l => l.code === locationForm.code)) {
    alert('该仓位编号已存在')
    return
  }

  // 创建新仓位
  const newLocation = {
    code: locationForm.code,
    name: locationForm.name,
    type: locationForm.type,
    current: locationForm.current,
    max: locationForm.max,
    manager: locationForm.manager,
    status: locationForm.status
  }

  locations.value.push(newLocation)
  showAddLocationModal.value = false

  // 重置表单
  locationForm.code = ''
  locationForm.name = ''
  locationForm.current = ''
  locationForm.max = ''
  locationForm.manager = ''

  alert('新仓位添加成功！')
}

const searchInventory = () => {
  // 搜索功能已经在计算属性中实现
}

const closeModal = (event, modalType) => {
  if (event.target.classList.contains('modal')) {
    switch (modalType) {
      case 'detail':
        showDetailModal.value = false
        break
      case 'edit':
        showEditModal.value = false
        break
      case 'addLocation':
        showAddLocationModal.value = false
        break
    }
  }
}

// 监听器
watch(() => inForm.type, (newVal) => {
  if (newVal) {
    const prefix = newVal === 'raw' ? 'IN-RM-' : 'IN-FH-'
    const randomNum = Math.floor(Math.random() * 10000).toString().padStart(4, '0')
    inForm.number = prefix + new Date().getFullYear() + randomNum
  }
})

watch(() => outForm.type, (newVal) => {
  if (newVal) {
    const prefix = newVal === 'raw' ? 'OUT-RM-' : 'OUT-FH-'
    const randomNum = Math.floor(Math.random() * 10000).toString().padStart(4, '0')
    outForm.number = prefix + new Date().getFullYear() + randomNum
  }
})

// 生命周期
onMounted(() => {
  const today = new Date().toISOString().split('T')[0]
  inForm.date = today
  outForm.date = today
})
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background-color: #f5f7fa;
  color: #333;
  line-height: 1.6;
}

.app-container {
  display: flex;
  min-height: 100vh;
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

/* 表单样式 */
.form-container {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.form-header {
  color: #2a5298;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e6ed;
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #444;
}

.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: #2a5298;
  outline: none;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 25px;
}

.btn-primary {
  background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  box-shadow: 0 4px 12px rgba(42, 82, 152, 0.3);
}

.btn-secondary {
  background: #f5f7fa;
  color: #555;
  border: 1px solid #ddd;
  padding: 12px 25px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
}

.btn-secondary:hover {
  background: #e0e6ed;
}

/* 表格样式 */
.table-container {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
  overflow-x: auto;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-box input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  width: 250px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e0e6ed;
}

th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #2a5298;
}

tr:hover {
  background-color: #f8f9fa;
}

.badge {
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.badge-success {
  background-color: #e6f7ee;
  color: #00a65c;
}

.badge-warning {
  background-color: #fef5e6;
  color: #f39c12;
}

.badge-danger {
  background-color: #fde9e9;
  color: #e74c3c;
}

.action-btn {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  margin-right: 5px;
}

.btn-view {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.btn-view:hover {
  background-color: #bae7ff;
}

.btn-edit {
  background-color: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
}

.btn-edit:hover {
  background-color: #ffe7ba;
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 80%;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 25px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e6ed;
}

.modal-title {
  color: #2a5298;
  font-size: 20px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.modal-body {
  margin-bottom: 20px;
}

.detail-row {
  display: flex;
  margin-bottom: 15px;
}

.detail-label {
  width: 120px;
  font-weight: 500;
  color: #666;
}

.detail-value {
  flex: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .search-box input {
    width: 100%;
  }

  .modal-content {
    width: 95%;
    max-height: 90vh;
  }
}
</style>